<template>
  <view class="page">
    <view class="body">
      <view class="article-list" :class="[articleType]">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="item.id"
          @click="onClickManual(item, index)"
        >
          <article-item
            mode="other"
            :type="item.type"
            :read="item.read_num"
            :thumb="item.cover_img_url"
            :title="item.title"
            :tags="item.tags"
            class="v-input"
          >
          </article-item>
        </view>
      </view>
      <view class="no-data-box" v-if="!dataList.length">
        <noData></noData>
      </view>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import { delayFunc } from "@/common/util";

import viewModule from "@/common/mixins/view-module";
import { mapState } from "vuex";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import { getCollegeTag } from "@/common/api/college";
import inputSearch from "@/components/public/input/search";
import articleItem from "@/components/public/item/article";
import noData from "@/components/public/noData/noData";
export default {
  mixins: [viewModule],
  components: { inputSearch, articleItem, noData },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      imgBaseUrl,
      imgBaseUrlV2,
      pageHeadStyle: "",
      articleType: "",
      dataList: [],
      girds: [],
      mixinViewOptions: {
        getURL: "/getCollegeCourseArticleList",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
      dataForm: {
        sort: "desc",
      },
    };
  },
  methods: {
    fetchComplete(err, data = [], res = {}) {
      console.log(arguments, "ar");
      if (err) {
        this.message.error(res.message || "获取数据失败!");
      }
      data.forEach((i) => {
        i.tags = [];
        if (i.course_info) {
          let tag = i.course_info.tag || "";
          let tagArr = tag.split(",");
          i.tags = tagArr.map((i) =>
            this.$getDictLabel("repositoryArticleTag", i)
          );
        }
      });
    },
    onClickBanner(item, index) {
      if (item.video_url) {
        this.$Router.push({
          path: "/pages/video-play/video-play",
          query: {
            path: item.video_url,
          },
        });
      } else {
      }
    },
    onClickGird(item, index) {},
    onClickManual(item, index) {
      this.$Router.push({
        path: "/pages/college/course/index",
        query: {
          ...item,
        },
      });
    },
    onFocus(e) {
      this.$Router.push({
        path: "/pages/college/search",
      });
    },
    initData() {
      return Promise.all([this.getDataList()]);
    },
  },
  created() {},
  mounted() {
    uni.$emit("hideLoading");
  },
  onLoad(q) {
    let item = q.item;
    if (item) {
      try {
        item = JSON.parse(decodeURIComponent(item));
      } catch (err) {}
      console.log(item, "?item");
      if (typeof item === "object") {
        this.dataForm = {
          ...this.dataForm,
          class_tag: item.id || "",
          sort: "desc",
        };
        if (!this.dataForm.class_tag) {
          delete this.dataForm.class_tag;
        }
        uni.setNavigationBarTitle({
          title: item.name,
        });
      }
    } else {
      this.dataForm = {
        ...q,
        ...this.dataForm,
        sort: "desc",
      };
      if (this.dataForm.title) {
        uni.setNavigationBarTitle({
          title: this.dataForm.title,
        });
      }
    }
    console.log(q, "?q", this.dataForm);

    this.getDataList();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.page {
  // - 100rpx
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
}

.page-head {
  position: fixed;
  z-index: 998;
  width: 100%;
  height: calc(100rpx + var(--status-bar-height));
  line-height: 100rpx;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  transition: all 0.3s;
  padding-top: var(--status-bar-height);
  color: #000;
  background: #FFFFFF;
  box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.12);
}

.head-polyfill {
  height: calc(100rpx + var(--status-bar-height));
}

.article-list {
  padding-top: 20rpx;

  >.item {
    display: flex;
    padding: 0 24rpx;

    &:first-child {
    }
  }
}

.no-data-box {
  height: calc(100vh - var(--window-top));
}
</style>
